<template>
  <div class="dashboard-container">
    <el-row :gutter="24">
      <el-col :span="14">
        <div class="grid-content e1-left left bg-purple">
          <p
            style="    font-size: 16px;
    font-weight: 700;
    margin: auto;margin-bottom:16px"
            class="el-left-top"
          >机构概述</p>
          <div class="el-left-buttom">
            <div class="el-left-left left" style="flex:18">
              <div class="organname">{{ user.organName }}
              </div>
              <div class="organ1">地址：{{ user.organAddress }}
              </div>
              <div class="organ1">负责人：{{ user.principal }} {{ user.phone }}
              </div>
              <div>
                <el-button style="width:160px;height:38px; color:orange;" @click="dialogVisible=true">查看营业部发布</el-button>
              </div>
            </div>
            <el-divider direction="vertical" />
            <div class="el-left-right right" style="flex:18">
              <el-row class="smell" :gutter="10">
                <el-col :span="12">
                  <div class="grid-content1 bg-purple">
                    <div class="text">分拣中心(个)  </div>
                    <div class="num" @click="change('base/management')"> {{ user.sortingCenterNumber }}</div>
                  </div>
                </el-col>
                <el-col :span="12"><div class="grid-content1 bg-purple">
                  <div class="text">营业部(个)
                  </div>
                  <div class="num" @click="change('base/management')"> {{ user.agencyNumber }}</div>
                </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12"><div class="grid-content1 bg-purple">
                  <div class="text">司机人数(个)  </div>
                  <div class="num" @click="change('user/driver')"> {{ user.driverNumber }}</div>
                </div>
                </el-col>
                <el-col :span="12"><div class="grid-content1 bg-purple">
                  <div class="text">快递员数(个)  </div>
                  <div class="num" @click="change('user/courier')"> {{ user.courierNumber }}</div>
                </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10"><div class="grid-content e1-left bg-purple">
        <div
          class="refresh-box"
          @click="handleRefreshTodayDataTime()"
        >
          {{ todayDataTime }}
        </div>
        <p
          style="    font-size: 16px;
    font-weight: 700;
    margin: auto;margin-bottom:16px"
          class="el-left-top"
        >今日数据

        </p>
        <div>
          <el-row :gutter="20">
            <el-col :span="8"><div class="grid-content2 bg-purple">
              <p>订单金额(元)
              </p>
              <div>
                <!-- {{ todaydata.orderAmount }} -->
                <countTo :start-val="0" style="font-size:30px;color:black" :end-val="todaydata.orderAmount" :duration="1000" />
              </div>
              <span>较昨日+{{ todaydata.orderAmountChanges }}<img
                src="../../assets/image/up.png"
                alt=""
              ></span>
            </div>

            </el-col>
            <el-col :span="8"><div class="grid-content2 bg-purple">
              <p>订单数量(笔)
              </p>
              <div>
                <!-- {{ todaydata.orderNumber }} -->
                <countTo :start-val="0" style="font-size:30px;color:black" :end-val="todaydata.orderNumber" :duration="1000" />
              </div>
              <span>较昨日+{{ todaydata.orderNumberChanges }}<img
                src="../../assets/image/up.png"
                alt=""
              ></span>
            </div>

            </el-col>
            <el-col :span="8"><div class="grid-content2 bg-purple">
              <p>运输任务(次)
              </p>
              <div>
                <!-- {{ todaydata.transportTaskNumber }} -->
                <countTo :start-val="0" style="font-size:30px;color:black" :end-val="todaydata.transportTaskNumber" :duration="1000" />
              </div>
              <span>较昨日+{{ todaydata.transportTaskNumberChanges }}<img
                src="../../assets/image/up.png"
                alt=""
              ></span>
            </div></el-col></el-row></div>

      </div></el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="14"><div class="grid-content bg-purple">
        <div
          class="refresh-box"
          @click="handleRefreshNotTaskDataTime()"
        >
          {{ notTaskDataTime }}
        </div>
        <p
          style="    font-size: 16px;
    font-weight: 700;
    margin: auto;margin-bottom:16px"
          class="el-left-top"
        >待办任务
          <el-tooltip placement="left" effect="light">
            <div slot="content"><p style="font-size:15px;color:#818693;margin-left:0px">待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件<br>
              待派送率=待派送/(待派送+派送中+已签收+拒收)<br>
              未分配率=未分配/全部数据<br>
              超时率=超时任务/(已完成+进行中+已取消）</p></div>
            <i class="el-icon-question" />
          <!-- <i class="el-icon-info" /> -->
          </el-tooltip>
        </p>

        <div>
          <ballecharts
            id="ballChart"
            ref="ballChart"
            :data="backlogChartData"
            :x-distance="25"
          />
        </div>
        <div class="bottom-label1">
          <div
            v-for="(item,index) in backlogListdata"
            :key="index"
            class="item"
            @click="handleBacklog(item.url,item.status)"
          >
            <span>{{ item.label }}</span> <span>{{ item.value }}</span>

          </div>
        </div>
      </div>
      </el-col>
      <el-col :span="10"><div class="grid-content bg-purple">
        <div
          class="refresh-box"
          @click="handleRefreshTodayDataTime()"
        >
          {{ todayDataTime }}
        </div>
        <p
          style="    font-size: 16px;
    font-weight: 700;
    margin: auto;margin-bottom:16px"
          class="el-left-top"
        >执行中任务
          <el-tooltip placement="bottom" effect="light">
            <div slot="content"><p style="font-size:15px;color:#818693;margin-left:0px">运输率=运输中/(全部订单-待取件-已取件-网点入库-待装车-已取消）<br>
              派送率=派送中/(待派送+派送中+已签收+拒收）</p></div>
            <i class="el-icon-question" />
          <!-- <i class="el-icon-info" /> -->
          </el-tooltip>
        </p>
        <div>
          <ballecharts
            id="ballCharting"
            ref="ballCharting"
            :data="taskingChartData"
            :x-distance="48"
          />
        </div>
        <div class="bottom-label2">
          <div
            v-for="(item,index) in taskingListData"
            :key="index"
            class="item"
            @click="handleBacklog(item.url,item.status)"
          >
            <span>{{ item.label }}</span> <span>{{ item.value }}</span>

          </div>
        </div>
      </div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24"><div class="grid-contentb2 bg-purple">
        <p
          style="    font-size: 16px;
    font-weight: 700;
    margin: auto;margin-bottom:16px"
          class="el-left-top"
        >常用功能

        </p>
        <el-row :gutter="20">
          <el-col :span="4"><div
            class="grid-content5 bg-purple"
            @click="change('transport/dispick')"
          >
            <i class="el-icon-box grid-content5i" />
            <div class="str">快递作业</div>
          </div>
          </el-col>
          <el-col :span="4"><div class="grid-content5 bg-purple" @click="change('transport/task')">
            <i class="el-icon-truck" />
            <div>运输任务</div>
          </div>
          </el-col>
          <el-col :span="4"><div class="grid-content5 bg-purple" @click="change('transport/line')">
            <i class="el-icon-s-operation" />
            <div>线路管理</div>
          </div>
          </el-col>
          <el-col :span="4"><div class="grid-content5 bg-purple" @click="change('car/list')">
            <i class="el-icon-truck" />
            <div>车辆管理</div>
          </div>
          </el-col>
          <el-col :span="4"><div class="grid-content5 bg-purple" @click="change('user/driver')">
            <i class="el-icon-user" />
            <div>司机管理</div>
          </div>
          </el-col>
          <el-col :span="4"><div class="grid-content5 bg-purple" @click="change('base/transit')">
            <i class="el-icon-document" />
            <div>运费查询</div>
          </div>
          </el-col>
        </el-row>
      </div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12"><div class="grid-content bg-purple">
        <p
          style="    font-size: 16px;
    font-weight: 700;
    margin: auto;margin-bottom:16px"
          class="el-left-top"
        >线路管理

        </p>
        <div>
          <lineManageChart ref="lineManageChart" />
        </div>
      </div>
      </el-col>
      <el-col :span="12"><div class="grid-content bg-purple">
        <div
          class="search-more"
          @click="handleToTransportTask"
        >
          查看更多
        </div>
        <p
          style="    font-size: 16px;
    font-weight: 700;
    margin: auto;margin-bottom:16px"
          class="el-left-top"
        >运输任务

        </p>

        <div class="table_body">
          <div class="table_th">
            <div class="tr1 th_style">任务编号</div>
            <div class="tr2 th_style">起始地</div>
            <div class="tr3 th_style">目的地</div>
            <div class="tr4 th_style">车辆</div>
            <div class="tr4 th_style">任务状态</div>
          </div>
          <div
            class="table_main_body"
            @mousemove="handleStopScroll()"
            @mouseleave="handleStartScroll()"
          >
            <div
              class="table_inner_body"
              :class="!tableTop?'':'startTransition'"
              :style="{top: tableTop + 'px'}"
            >
              <div
                v-for="(item,index) in transportTaskListData"
                :key="index"
                class="table_tr"
              >
                <div class="tr1 tr">{{ item.id }}</div>
                <div class="tr2 tr">{{ item.startAgency }}</div>
                <div class="tr3 tr"> {{ item.endAgency }}</div>
                <div class="tr4 tr">{{ item.licensePlate }}</div>
                <div class="tr4 tr ">{{
                  item.status =='1'?'待执行':item.status == '2'?'进行中':item.status == '3'?'待确认':item.status == '4'?'已完成':'已取消'
                }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12"><div class="grid-content bg-purple">
        <div
          class="Orderdistributiontime"
        >
          {{ getMonthsBeforeSix() }}

        </div>
        <p
          style="    font-size: 16px;
    font-weight: 700;
    margin: auto;margin-bottom:16px"
          class="el-left-top"
        >订单总量

        </p>
        <p
          style="  font-size:14px;color:#818693;margin-top:0"
        >单位：笔</p>
        <div
          ref="orderStatic"
          class="order-static"
        >
          <div class="item">
            <div
              id="my-number4"
              class="num"
            >{{ orderAccountTitleData.orderMaxNumber }}</div>
            <div class="label">订单最高值</div>
          </div>
          <div class="item">
            <div
              id="my-number5"
              class="num"
            >{{ orderAccountTitleData.orderAverageNumber }}</div>
            <div class="label">订单平均值</div>
          </div>
          <div class="item">
            <div
              id="my-number6"
              class="num"
            >{{ orderAccountTitleData.orderMinNumber }}</div>
            <div class="label">订单最低值</div>
          </div>
        </div>
        <div>
          <orderAccountChart
            ref="orderAccountChart"
            :order-account-chart-y="orderAccountChartY"
            :order-account-chart-x="orderAccountChartX"
          />
        </div>
      </div>
      </el-col>
      <el-col :span="12"><div class="grid-content bg-purple">
        <div
          class="Orderdistributiontime"
        >
          {{ getMonthsBeforeSix() }}

        </div>
        <p
          style="    font-size: 16px;
    font-weight: 700;
    margin: auto;margin-bottom:16px"
          class="el-left-top"
        >订单分布

        </p>
        <p
          style="  font-size:14px;color:#818693;margin-top:0"
        >单位：笔</p>
        <orderDistributeChart ref="orderDistributeChart" />
      </div>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="dialogVisible"
      width="750px"
      :before-close="handleClose"
      class="deparment"
    >
      <div
        class="close-btn"
        @click="handleClose"
      />
      <img src="../../assets/image/department_map.7a0c7499.png">
    </el-dialog>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
import { mapGetters } from 'vuex'
import { getworkspace } from '@/api/dashboard'
import ballecharts from './components/ballecharts.vue'
import lineManageChart from './components/lineManageChart.vue'
import orderAccountChart from './components/orderAccuntLineChart.vue'
import orderDistributeChart from './components/orderDistributeChart.vue'
export default {
  name: 'Dashboard',
  components: {
    countTo,
    ballecharts,
    lineManageChart,
    orderAccountChart,
    orderDistributeChart
  },
  data() {
    return {
      tableTop: 0,
      isHover: false,
      dialogVisible: false,
      user: {},
      todaydata: {},
      // organAddress: ''
      backlogChartData: [
        {
          value: ''
        }, {
          value: ''
        }, {
          value: ''
        }, {
          value: ''
        }
      ],
      backlogListdata: [
        {
          value: 0,
          label: '待取件',
          url: 'business/order',
          status: 23000
        },
        {
          value: 0,
          label: '待派件',
          url: 'business/order',
          status: 23007
        },
        {
          value: 0,
          label: '未分配运输',
          url: 'transport/task',
          status: 1
        },
        {
          value: 0,
          label: '超时运输',
          url: 'transport/task',
          status: 5
        }
      ],
      taskingChartData: [
        {
          value: ''
        }, {
          value: ''
        }
      ],
      taskingListData: [
        {
          value: 0,
          label: '运输中',
          url: 'business/order',
          status: 23005
        },
        {
          value: 0,
          label: '派送中',
          url: 'business/order',
          status: 23008
        }
      ],
      orderAccountTitleData: {
        orderMaxNumber: '',
        orderAverageNumber: '',
        orderMinNumber: ''
      },
      // 订单总量折线图Y轴数据
      orderAccountChartY: [],
      // 订单总量折线图X轴数据
      orderAccountChartX: [],
      transportTaskListData: [],
      notChangeTransportTaskListData: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },

  mounted() {

  },
  created() {
    this.todayDataTime = this.getCurrentTime()
    this.taskingDataTime = this.getCurrentTime()
    this.notTaskDataTime =
      this.getCurrentTime() + ' - ' + this.getAfterThreeDays()
    this.getworkspace()
  },
  methods: {
    async getworkspace() {
      const res = await getworkspace()
      this.user = res.organOverview
      this.todaydata = res.todayData
      this.transportTaskListData = res.transportTaskList
      this.notChangeTransportTaskListData = res.transportTaskList
      const arr = [
        res.backlog.timeoutTransportTaskNumber,
        res.backlog.unassignedTransportTaskNumber,
        res.backlog.waitingDispatchNumber,
        res.backlog.waitingPickupNumber
      ]
      const backarr = [
        res.backlog.timeoutTransportTaskRate,
        res.backlog.unassignedTransportTaskRate,
        res.backlog.waitingDispatchRate,
        res.backlog.waitingPickupRate
      ]
      const arr2 = [
        res.todayData.taskInDeliveryNumber,
        res.todayData.taskInTransitNumber
      ]
      const taskingarr = [
        res.todayData.taskInDeliveryRate,
        res.todayData.taskInTransitRate
      ]
      this.taskingListData = this.taskingListData.map((item, index) => {
        return Object.assign({}, item, { value: arr2[index] })
      })
      this.backlogListdata = this.backlogListdata.map((item, index) => {
        return Object.assign({}, item, { value: arr[index] })
      })
      const ColorList2 = ['#E15536', '#FFC257'] // 链群颜色值
      const LabelColorList2 = ['#20232A', '#20232A'] // 文本字体颜色
      const OtherColorList2 = ['#FFE5E0', '#FFF1D9'] // 波浪其他地方填充色
      const ColorList = ['#E15536', '#FFC257', '#FF9739', '#ECDC7E']
      const LabelColorList = ['#20232A', '#20232A', '#20232A', '#20232A']
      const OtherColorList = ['#FFE5E0', '#FFF1D9', '#FFEAD7', '#FAFADE']
      // 对backlogChartdata的数据进行处理，成为一个符合echarts图表数据格式的数组，将backlogChartArr的值拼接赋入其中
      this.backlogChartData = this.backlogChartData.map((item, index) => {
        return {
          value: backarr[index],
          color: ColorList[index],
          labelColor: LabelColorList[index],
          otherColor: OtherColorList[index]
        }
      })
      this.taskingChartData = this.taskingChartData.map((item, index) => {
        return {
          value: taskingarr[index],
          color: ColorList2[index],
          labelColor: LabelColorList2[index],
          otherColor: OtherColorList2[index]
        }
      })
      this.orderAccountTitleData = res.orderLineChart
      this.orderAccountChartY = res.orderLineChart.monthlyOrderList.map((item) => {
        return item.dateTime
      })
      this.orderAccountChartX = res.orderLineChart.monthlyOrderList.map((item) => {
        return item.orderNumber
      })
      this.$nextTick(() => {
        this.$refs.ballChart.initial()
        this.$refs.ballCharting.initial()
        this.$refs.lineManageChart.initial()
        this.$refs.orderAccountChart.initial()
        this.$refs.orderDistributeChart.initial()
        this.tableActionFun()
      })
    },
    getMonthsBeforeSix() {
      const date = new Date() // 获取当前时间
      const year = date.getFullYear() // 获取当前年份
      const month = date.getMonth() // 获取当前月份
      let newYear = 0 // 用于存储年份
      let newMonth = 0 // 用于存储月份
      const newDateArr = []
      for (let i = 0; i < 6; i++) {
        // 这里是获取前六个月,所以循环6次,根据需要修改
        if (month - i < 1) {
          // 这里的判断是如果当前月份往前推到了去年需要做的处理
          newYear = year - 1
          newMonth =
            month - i + 12 >= 10 ? month - i + 12 : '0' + (month - i + 12) // nonth - i + 12>=10是为了处理月份为10,11,12的情况,当月份为1-9时,前面需要加0所以需要用三元运算符判断
          newDateArr.push(newYear + '-' + newMonth) // 这里拼接格式化,在时间中间加了个-,根据实际需求来
        } else {
          newMonth = month - i >= 10 ? month - i : '0' + (month - i) // 这里是对月份小于10做加前面加0处理
          newDateArr.push(year + '-' + newMonth)
        }
      }
      return newDateArr[5] + ' - ' + newDateArr[0]
    },
    getAfterThreeDays() {
      const date = new Date(new Date().getTime() + 172800000) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      const D =
        (date.getDate() < 10
          ? '0' + (date.getDate())
          : date.getDate()) + ' '
      return Y + M + D + '23' + ':' + '59'
    },
    handleRefreshTodayDataTime() {
      this.todayDataTime = this.getCurrentTime()
    },
    tableActionFun() {
      this.tableListSize = this.transportTaskListData.length
      this.transportTaskListData = this.notChangeTransportTaskListData.concat(this.notChangeTransportTaskListData)// 此处重新赋值避免出现transportTaskListData无限累加造成DOM过多导致页面崩溃，echarts不会自动清理多次触发的DOM
      // 下面的visibleSize是可视范围内能够显示的最大完整数据条数
      if (this.tableListSize > this.visibleSize) {
        this.transportTaskListData = this.transportTaskListData.concat(
          this.transportTaskListData
        )
        this.tableTimerFun() // 列表滚动方法
      } else {
        // this.fillTableList() // 无需滚动时的数据填充方法，如果没必要，可以删掉
      }
    },
    handleToTransportTask() {
      this.$router.push({
        path: 'transport/task'
      })
    },
    handleRefreshNotTaskDataTime() {
      this.notTaskDataTime =
        String(this.getCurrentTime()) +
        ' - ' +
        String(this.getAfterThreeDays())
    },
    getCurrentTime() {
      var date = new Date() // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      var D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '

      var h =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var m =
        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      return Y + M + D + h + m
    },
    tableTimerFun() {
      let count = 0
      this.tableTimer = setInterval(() => {
        if (count < this.transportTaskListData.length / 2) {
          this.tableTop -= 50
          count++
        } else {
          count = 0
          this.tableTop = 0
        }
      }, this.tableTimerInterval)
    },
    // 停止滚动
    handleStopScroll() {
      clearInterval(this.tableTimer)
    },
    // 开始滚动
    handleStartScroll() {
      this.tableActionFun()
    },
    handleClose() {
      this.dialogVisible = false
    },
    change(url) {
      this.$router.push({
        path: url
      })
    },
    handleBacklog(url, status) {
      this.$router.push({
        path: url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 24px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-divider{
  height:154px;
}
  .el-row {
    margin-bottom: 24px;
    &:last-child {
      margin-bottom: 0;
    }
  }
    .smell .el-row {
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-contentb2{
        border-radius: 4px;
    min-height: 180px;
        padding: 23px 20px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 235px;
        padding: 23px 20px;
  }
    .grid-content1 {
    border-radius: 4px;
    min-height:65px;
    padding: 0 30px 0;
    // background-color: aquamarine;
  }
      .grid-content2 {
        text-align:center;
    border-radius: 4px;
    min-height:144px;
    padding: -1px 22px 0;
    // background-color: aquamarine;
  }
        .grid-content5 {
        text-align:center;
    border-radius: 4px;
    min-height:116px;
    padding: -1px 22px 0;
    background-color: #fafafb;
  }
  .text{
    font-size: 14px;
    margin-bottom: 16px;
  }
  .num{
font-size: 30px;
font-weight: 700;
color: red;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .left{
    float: left;
  }
  .right{
    float: right;
  }

    .e1-left-top{
    font-size: 16px;
    font-weight: 700;
    margin: auto;
    }
    .el-left-left{
      width: 332px;
      padding: 0 0 0 10px;
    }
    .ell div{
      width: 100px;
      height: 100px;
      background-color: azure;
    }
    .organname{
      font-size: 16px;
    margin-top: 20px;
    margin-bottom: 13px;
    }
    .organ1{
      font-size: 14px;
    color: #818693;
    margin-bottom: 8px;
    }
    .grid-content2 p{
          font-size: 14px;
    color: #20232a;
    margin-bottom: 21px;
    }
    .el-button{
      margin-top: 20px;
    }
    .grid-content2 div{
      font-size: 36px;
    color: #20232a;
    font-weight: 700;
    margin-bottom: 22px;
    }
    .grid-content2 span{
          font-size: 14px;
    color: #818693;
    }
    .grid-content2 span img{
      line-height: 1;
      width: 16px;
      height: 16px;
    }
        .grid-content5 i{
          margin: 20px 0;
font-size: 30px;
    }
.grid-content5:hover {
        color: #e15536;
  }
.bottom-label1 {
    cursor: pointer;
    position: absolute;
    top: 235px;
    display: flex;
    width: 59%;
    justify-content: space-around;
    padding-right: 60px;
    .item span:nth-child(1),
    .item span:nth-child(2) {
      font-weight: bold;
    }
        .item:nth-child(1) span:nth-child(2){
          color: #E15536 ;
        }
        .item:nth-child(2) span:nth-child(2){
          color: #FFC257 ;
        }
                .item:nth-child(3) span:nth-child(2){
          color: #FF9739 ;
        }
                .item:nth-child(4) span:nth-child(2){
          color: #ECDC7E ;
        }justify-content: flex-start;
    .item {
      flex: 25%;
      text-align: center;
    }

}
.el-left-buttom{
  display: flex;
}
.bottom-label2 {
    cursor: pointer;
    position: absolute;
    top: 235px;
    display: flex;
    width: 40%;
    justify-content: space-around;
    padding-right: 55px;
    .item span:nth-child(1),
    .item span:nth-child(2) {
      font-weight: bold;
    }
        .item:nth-child(1) span:nth-child(2){
          color: #E15536 ;
        }
// '#E15536', '#FFC257', '#FF9739', '#ECDC7E'
        .item:nth-child(2) span:nth-child(2){
          color: #FFC257 ;
        }
justify-content: flex-start;
    .item {
      flex: 25%;
      text-align: center;
    }

}

  .order-static {
    display: flex;
    justify-content: space-evenly;
    margin-top: 38px;
    .item {
      .num {
        font-size: 28px;
        color: #e15536;
        font-weight: bold;
        text-align: center;
        margin-bottom: 5px;
      }
      .label {
        font-size: 12px;
        color: #818693;
        text-align: center;
      }
    }
  }
.hovered {
  color: red; /* 变色为红色，根据需求修改颜色 */
}
.deparment {
  // .el-dialog {
  //   border-radius: 0px;
  //   height: 600px;
  // }
 ::v-deep .el-dialog__header {
    padding: 0;
    display: none;
  }
  img {
    width: 750px;
    height: 580px;
    margin-left: -20px;
    margin-right:20px ;
  }
 ::v-deep .el-dialog__body {
    // margin-left: 60px;
    padding: 0 20px;
    position: relative;
  }
  .close-btn {
    width: 40px;
    height: 40px;
    background-image: url('../../assets/image/x.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 18px;
    top: 15px;
    cursor: pointer;
  }
}
  .search-more {
    font-size: 14px;
    color: #818693;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .search-more::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('../../assets/image/next.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 8px;
  }

  .table_body {
    width: 100%;
  }
  .table_th {
    width: 100%;
    display: flex;
    height: 50px;
    line-height: 50px;
    border: 1px solid #ebeef5;
    border-bottom: none;
    background-color: #f9fafe;
  }
  .tr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 5px;
    text-align: center;
    font-size: 14px;
    color: black;
  }
  .tr1 {
    width: 20%;
  }
  .tr2 {
    width: 20%;
  }
  .tr3 {
    width: 20%;
    font-size: 13px;
  }

  .tr4 {
    flex: 1;
  }

  .th_style {
    font-weight: bold;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 5px;
    text-align: center;
    color: #818693;
    font-size: 14px;
  }
  .table_main_body {
    width: 100%;
    height: 351px;
    overflow: hidden;
    position: relative;
  }
  .table_inner_body {
    width: 100%;
    position: absolute;
    left: 0;
  }
  .startTransition {
    transition: all 0.5s;
  }
  .table_tr:nth-child(odd) {
    background-color: #ffffff;
  }
  .table_tr:nth-child(even) {
    background-color: #fafafa;
  }
  .table_tr:hover {
    background-color: rgb(245, 247, 250);
  }
  .table_tr {
    display: flex;
    height: 50px;
    line-height: 50px;
    color: #eee;
    font-size: 15px;
    cursor: pointer;
    border: 1px solid #ebeef5;
    border-bottom: none;
    .tr1 {
      padding-left: 20px;
    }
  }
  .table_tr:last-child {
    border-bottom: 1px solid #ebeef5;
  }
.Orderdistributiontime{
  float: right;
  font-size:14px;color:#818693
}
.search-more{
    float: right;
  font-size:14px;color:#818693
}
.refresh-box {
  float: right;
  font-size: 14px;
  color: #818693;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.refresh-box::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 14px;
  background-image: url('../../assets/image/new.png');
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 8px;
  // cursor: pointer;
}
.el-divider--vertical{
  width: 1px;
}

</style>
